<template>
  <view class="performance-monitor" v-if="showMonitor">
    <view class="monitor-panel">
      <text class="monitor-title">性能监控</text>
      <view class="monitor-stats">
        <view class="stat-item">
          <text class="stat-label">页面加载时间:</text>
          <text class="stat-value">{{ loadTime }}ms</text>
        </view>
        <view class="stat-item" v-if="memoryUsage">
          <text class="stat-label">内存使用:</text>
          <text class="stat-value">{{ formatMemory(memoryUsage.used) }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">平台:</text>
          <text class="stat-value">{{ platform }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">网络状态:</text>
          <text class="stat-value">{{ networkType }}</text>
        </view>
      </view>
      <view class="monitor-actions">
        <text class="action-btn" @click="clearCache">清理缓存</text>
        <text class="action-btn" @click="hideMonitor">关闭</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PerformanceMonitor',
  data() {
    return {
      showMonitor: false,
      loadTime: 0,
      memoryUsage: null,
      platform: '',
      networkType: ''
    }
  },
  
  mounted() {
    this.initMonitor()
    
    // 开发环境下显示监控面板
    // #ifdef H5
    if (process.env.NODE_ENV === 'development') {
      this.showMonitor = true
    }
    // #endif
  },
  
  methods: {
    // 初始化监控
    initMonitor() {
      // 获取平台信息
      this.platform = this.$platform.getPlatform()
      
      // 获取页面加载时间
      this.loadTime = this.$performance.monitor.endTiming()
      
      // 获取内存使用情况
      this.memoryUsage = this.$performance.monitor.getMemoryUsage()
      
      // 获取网络状态
      this.getNetworkType()
      
      // 定时更新监控数据
      this.updateTimer = setInterval(() => {
        this.updateMonitorData()
      }, 5000)
    },
    
    // 更新监控数据
    updateMonitorData() {
      this.memoryUsage = this.$performance.monitor.getMemoryUsage()
      this.getNetworkType()
    },
    
    // 获取网络类型
    getNetworkType() {
      uni.getNetworkType({
        success: (res) => {
          this.networkType = res.networkType
        }
      })
    },
    
    // 格式化内存大小
    formatMemory(bytes) {
      if (!bytes) return '0 B'
      
      const sizes = ['B', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(1024))
      
      return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i]
    },
    
    // 清理缓存
    clearCache() {
      this.$performance.cache.clear()
      this.$platform.showToast('缓存已清理', 'success')
    },
    
    // 隐藏监控面板
    hideMonitor() {
      this.showMonitor = false
    },
    
    // 显示监控面板
    show() {
      this.showMonitor = true
    }
  },
  
  beforeDestroy() {
    if (this.updateTimer) {
      clearInterval(this.updateTimer)
    }
  }
}
</script>

<style lang="scss" scoped>
.performance-monitor {
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: 9999;
  
  .monitor-panel {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px;
    border-radius: 8px;
    min-width: 200px;
    font-size: 12px;
    
    .monitor-title {
      font-weight: bold;
      margin-bottom: 10px;
      display: block;
      text-align: center;
    }
    
    .monitor-stats {
      margin-bottom: 10px;
      
      .stat-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        
        .stat-label {
          color: #ccc;
        }
        
        .stat-value {
          color: #4cd964;
          font-weight: bold;
        }
      }
    }
    
    .monitor-actions {
      display: flex;
      justify-content: space-between;
      
      .action-btn {
        background: #667eea;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        cursor: pointer;
        
        &:hover {
          background: #764ba2;
        }
      }
    }
  }
}
</style>